Day2 Javascript能做到的事

2022 iThome 鐵人賽

DAY 2

Modern Web

Javascripts惡補小教室系列第 2 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-09-17 22:03:11

522 瀏覽

分享至

Javascript究竟能耐在哪裡?

前面介紹了Javascript的定位及能做的事情，但就具體印象來說是蠻模糊的，究竟他在html、css、一個網頁間能改變哪些事物，做到怎麼樣的效果，接下來就簡單說明一些範例。

1. 更改Html內容

一個網頁裡的基石、內容就是Html，那透過我們的主角，可以很輕易地更改Html的內容。
透過 getElementById() 抓取Html元素，我們要先知道他的名子(id)，知道後就可以更改內容(使用innerHtml)。

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").innerHTML = "哈囉，開心的世界";
    }
  </script>

當按鈕點擊後，觸發change函數，輕鬆將Html裡的內容改為"哈囉，開心的世界"。

2. 更改樣式(Css)

能夠改變Html、那Css當然也沒問題囉!

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.color = "blue";
    }
  </script>

透過.style.xxx(你想改變的屬性，例:color、fontsize、fontfamily)都可以輕易做到。
將文字顏色改成藍色~

3. 隱藏Html內容

我們很常會有將內容隱藏或顯示的需求，例如按下按鈕哪些表單要出現、要隱藏，這時候我們也可以使用Javascript去完成。

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.display = "none";
    }
  </script>

而顯示也很簡單，大概念都跟改變style屬性一樣!

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.display = "block";
    }
  </script>

認識完Javascript基礎能做到的事情後! 是不是比較有概念了呢?下一篇就讓我們介紹如何引入js吧